<!-- 表格的简单封装 -->
<template>
  <div class="btnLIst" v-if="BtnNameList == 'yonghu'">
    <a-button
      @click="openDialog('添加用户', null)"
      style="margin-right: 20px"
      type="primary"
    >
      <template #icon><PlusOutlined /></template>
      添加用户
    </a-button>
    <a-button @click="delsAll">批量删除</a-button>
  </div>
  <div class="btnLIst" v-if="BtnNameList == 'celue'">
    <a-button
      @click="openDialog('添加角色', null)"
      style="margin-right: 20px"
      type="primary"
    >
      <template #icon><PlusOutlined /></template>
      添加角色
    </a-button>
    <a-button @click="delsAll">批量删除</a-button>
  </div>
  <a-table
    :columns="tablecolumns"
    :dataSource="tabledata"
    :pagination="false"
    :row-selection="selectedRowKeys"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a-button @click="deleteColumn(column)">删除</a-button>
      </template>
    </template>
  </a-table>
  <a-pagination
    v-model:current="currentPage"
    :total="ALLtotal"
    @change="handlePageChange"
  />
  <a-modal
    v-model:open="modalVisible"
    title="删除确认"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    确认要删除这一列吗？
  </a-modal>
  <EasyModal @ok="ok" @cancel="cancel" :tabledataList="tabledataList" :isModalVisible="isModalVisible" :modaltitle="modaltitle" v-model:open="isModalVisible"></EasyModal>
</template>

<script setup>
  import { ref,defineProps, defineEmits } from 'vue'
  import { Table, Pagination, Modal, Button } from 'ant-design-vue'
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import EasyModal from './EasyModal.vue'

  const cancel=()=>{
    isModalVisible.value = false
  }
  const ok=(res)=>{
    console.log(res,'-----------------')
    isModalVisible.value = false
  }


  //父组件传过来的数据
  const props = defineProps({
    tablecolumns: {
      type: Array,
      default: () => [],
    },
    tabledata: {
      type: Array,
      default: () => [],
    },
    ALLtotal: {
      type: String,
      default: () => [],
    },
    BtnNameList: {
      type: String,
    },
  })
  //当前页码
  const currentPage = ref(1)
  //弹窗是否关闭
  const modalVisible = ref(false)
  //弹框组件是否显示
  const isModalVisible = ref(false)
  const columnToDelete = ref(null)
  //选中行
  const selectedRowKeys = ref([])
  //弹框标题
  const modaltitle = ref('')
  // 表格数据
  const tabledataList = ref([])

  // 分页变化时的处理逻辑

  const handleTableChange = (pagination, filters, sorter) => {
    currentPage.value = pagination.current
  }
  //点击删除的弹框显示
  const deleteColumn = (column) => {
    columnToDelete.value = column
    modalVisible.value = true
  }
  //删除的逻辑
  const handleModalOk = () => {
    // 删除列逻辑走接口
    // ...
    modalVisible.value = false
  }
  //取消弹框的按钮
  const handleModalCancel = () => {
    modalVisible.value = false
  }
  //添加用户
  const openDialog = (title, record) => {
    // console.log(title, record,'sss')
    isModalVisible.value = true
    modaltitle.value = title
  }
  //批量删除
  const delsAll = () => {}
  //选中的行
  const onSelectionChange = (selectedRowKeys, selectedRows) => {
    selectedRowKeys.value = selectedRowKeys
    // 可以在这里处理选中行的数据
  }
</script>
<style lang="less" scoped>
  .btnLIst {
    padding-bottom: 15px;
  }
</style>
